<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
		<title></title>
		<link rel="stylesheet" href="../../css/mui.min.css">
		<link rel="stylesheet" href="../../css/app.css">
		<style>
			html,body{height: 100%;overflow: auto;}
			.img_box{width: 7.5rem;height: 3.18rem;background: url(../../images/menu/img_card.png) no-repeat center center;background-size: contain;/*margin-top: 0.9rem;*/}
			.mui-table-view{width: 7.5rem;}
			.mui-table-view:after{height: 0;}
			.mui-table-view-cell{width: 100%;height: 0.90rem;padding: 0 !important;position: relative;padding-left: 0.5rem !important;padding-right: 0.3rem !important;}
			.mui-table-view-cell span{font-size: 0.3rem;float: left;display: inline-block;height: 100%;line-height: 0.9rem;text-align: center;}
			.mui-table-view-cell span:last-child{float:right;color: #999999;}
			.mui-icon-clear{top: 0 !important;}
			.mui-table-view-cell label{float: left;font-size: 0.3rem;height: 0.90rem;padding: 0 !important;line-height: 0.90rem;}
			.mui-table-view-cell input{float: right;margin: 0;border: none;font-size: 0.3rem;width: 65%;height: 100%;padding-left: 0;}
			.tx{width: 1.2rem;height:0.30rem;color: #117afd;position: absolute;right: 0;font-size: 0.28rem;top: 50%;margin-top: -0.15rem;}
			
			.mui-table-view-cell.mui-active{background-color: #fff;}
			.next{width: 6rem;height: 0.68rem;background: #117afd;font-size: 0.3rem;color: #fff;border: none;outline: none;border-radius: 0.1rem;margin: 0.6rem auto;}
			.mui-table-view-cell .code{width: 1.92rem;height: 0.66rem;font-size: 0.28rem;}
			.mui-table-view-cell .timing{display:none;background-color: #ccc;border:1px solid #ccc;line-height:0.4rem;color: #fff !important;}
			.success{background: #fff url(../../images/menu/ok.png) no-repeat center left;background-size: 0.42rem;width: 100%;padding-left: 2.8rem;background-position-x: 2.0rem;font-size: 0.30rem;height: 2.3rem;margin-top: 0.2rem;padding-top: 0.7rem;}
			.tels{font-size: 0.28rem;color: #999;}
			.box2{margin-top: 0.2rem;}
			.box2:before{height: 0;}
			/*.approve{margin-top: 0.3rem;padding-top: 0.33rem;width: 100%;height: 0.9rem;font-size: 0.28rem;color: #707070;padding-left: 2.3rem;line-height: 0.33rem;background: url(../../images/menu/ok1.png) no-repeat center;background-size: 0.26rem;background-position-y:0.33rem;background-position-x:1.8rem;}
			.active{background: url(../../images/menu/ok.png) no-repeat center;background-size: 0.26rem;background-position-y:0.33rem;background-position-x:1.8rem;}*/
			
		</style>
	</head>
	<body>
		<!--<div class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<a class="back">返回</a>
			<h1 class="mui-title">手机号认证</h1>
		</div>-->
		<div class="img_box"></div>
		<ul class="mui-table-view">
		    <li class="mui-table-view-cell">
		    	<span>姓名</span><span id="name">郭*曼</span>
		    </li>
		    <li class="mui-table-view-cell">
		    	<span>身份证</span><span id="idCard">342221****7441</span>
		    </li>
		</ul>
		<ul class="mui-table-view box2">
		    <li class="mui-table-view-cell mui-input-row">
		    	<label for="cad">卡号</label><input class="mui-input-clear" id="cad" type="text" placeholder="请输入银行卡账号"/>
		    </li>
		    <li class="mui-table-view-cell mui-input-row">
		    	<label for="phone">手机号</label><input id="phone" type="text" placeholder="请输入11位手机号码"/>
		    </li>
		     <li class="mui-table-view-cell">
		    	<label for="num">验证码</label><input id="num" type="text" placeholder="请输入验证码"/>
		    	<button id="sendCode" class="code mui-btn mui-btn-primary">发送验证码</button>
		    	<span class="timing code mui-btn mui-btn-primary">60s</span>
		    </li>
		</ul>
		
	
		<!--<div class="approve">我已阅读并同意<a >《支付服务协议》</a></div>-->
		<button class="next mui-btn mui-btn-primary">提交</button>
	</body>
	<script src="../../js/mui.min.js"></script>
	<script src="../../js/jquery2.2.4.min.js"></script>
	<script src="../../js/common.js"></script>
	<script src="../../js/app.js" ></script>
	<script>	
		var veriCode='';
		/*var approve = $('.approve');*/
		/*approve.each(function(){
			approve.hasClass('active');
			$(this).click(function(){
				if(!approve.hasClass('active')){
					$(this).addClass('active')
					
				}else{
					$(this).removeClass('active')
				}
			})
		})*/
		var name = null;
		var idCard = null;
		mui.plusReady(function(){
			var user = getUser();
			if (user) {
				name = user.userName;
				idCard = user.idCard;
				var tempId = idCard;
				var tempName = name;
				
				if(name != null && name != undefined){
					tempName = "";
					for(var i=0; i<name.length-1;i++){
						tempName +="*";
					}
					tempName +=name.charAt(name.length-1)
				}
				
				if(idCard != null){
					tempId = idCard.substr(0,6);
					for(var i=6; i<idCard.length-4;i++){
						tempId +="*";
					}
					tempId += idCard.substr(idCard.length - 4);
				}
				
				document.getElementById('name').innerHTML = tempName?tempName:'';
				document.getElementById('idCard').innerHTML = tempId?tempId:'';
			}
			
		});
		//发送验证码
		document.getElementById('sendCode').addEventListener('tap',function(){
			var phone = document.getElementById('phone').value;
			if (isMoible(phone)) {
				timing();
				utils.ajax('appHttpService/appSendPhone.do',function(data){
					var data = JSON.parse(data);
					if (data.code == '0') {//发送成功
						veriCode = data.result;
						if(data.zdht != undefined && data.zdht == '0'){
							document.getElementById('num').value = data.result;
						}
					} else {
						mui.toast(data.result);
					}
				},"netUserPhone="+phone,null,function(){
					mui.toast('抱歉，当前服务不可用，请稍后再试');
				})
			} else {
				mui.toast('请输入正确的手机号');
			}
		});
		//倒计时
		function timing(){
			var code = document.getElementById('sendCode');
			var timing = document.querySelector('.timing');
			code.style.display = 'none';
			timing.style.display = 'block';
			var i = 60;
			var index = setInterval(function(){
				if (i > 0) {
					timing.innerHTML = --i + 's';
				} else {
					timing.innerHTML = '60s';
					code.style.display = 'block';
					timing.style.display = 'none';
					clearInterval(index);
				}
			},1000);
		}
		//提交认证
		document.querySelector('.next').addEventListener('tap',function(){
			var user = getUser();
			if (!user) {
				mui.toast('当前登录人信息不正确');
				return;
			}
			
			var bankCard = document.getElementById('cad').value;
			if(bankCard == '' || bankCard == null || bankCard.trim() == ''){
				mui.toast('卡号不能为空');
				return;
			}
			
			var phone = document.getElementById('phone').value;
			if (phone == '' || phone == null || phone.trim() == '') {
				mui.toast('手机号不能为空');
				return;
			}else{
				if(!isMoible(phone)){
					mui.toast('请输入正确的手机号');
					return;
				}
			}
				
			var confirmCode = document.getElementById('num').value;
			if (confirmCode == '' || confirmCode == null || confirmCode.trim() == '') {
				mui.toast('验证码不能为空');
				return;
			}else if (confirmCode != veriCode) {
				mui.toast('验证码不正确');
				return;
			}
			
			utils.showWaiting();
			
			var idVerifyType = 2;//银联卡
			var params = {"bankCard":bankCard,"idCard":idCard,"realName":name,"phone":phone,"idVerifyType":idVerifyType,"userId":user.userId};
			utils.ajax('appHttpService/verify.do',function(data){
				utils.closeWaiting();
				var data = JSON.parse(data);
				if (data.state == '1') {//验证成功
					user.idVerifyStatus = user.idVerifyStatus + "|2";
					setState(user);
					//发起认证页面更新
					var register = plus.webview.getWebviewById('register.html');
					var rztongdao = plus.webview.getWebviewById('rztongdao.html');
					if (register) {
						mui.fire(register,'updateData');
					}
					if (rztongdao) {
						mui.fire(rztongdao,'updateData');
					}
					//mui.toast('认证成功！');
					localStorage.setItem("realName",name)
					var urlParams = 'idCard='+idCard+'&phone='+phone;
					showTemplates('yhk_rzsuc.html','银联卡实名认证','_www/src/login/yhk_rzsuc.html?'+urlParams)
					plus.webview.currentWebview().hide();
					plus.webview.currentWebview().close();
				} else {
					mui.toast(data.msg);
				}
			},jsonToParams(params),null,function(){
				mui.toast('抱歉，当前服务不可用，请稍后再试');
			})
			
		});
	</script>
</html>